<template>
  <div class="listWrap">
      <flexbox wrap="wrap" orient="vertical" :gutter="0">
          <flexbox-item class="list-item" v-for="(item, index) in lists" :key="item.id" @click.native="shows(index)">
              <div class="wraps">
                  <img :src="item.logo" alt="" />
                  <div class="title">{{item.name}}</div>
              </div>
          </flexbox-item>
      </flexbox>
        <div v-transfer-dom>
            <popup position="top" height="400px" :hide-on-blur="false" v-model="showDialog" class="casePopup">
                <div class="">
                    <div class="popTitle"><div class="clodeBtn" @click="closePop">关闭</div>{{showVideo.name}}</div>
                    <div class="videos" v-if="showDialog">
                        <div id="youkuplayer" style=""></div>
                    </div>
                    <div class="popFooter">
                        <div class="popFooter-title">{{showVideo.two_name}}</div>
                        <scroller lock-x scrollbar-y height="120px">
                            <div class="popFooter-content" v-html="showVideo.content"></div>
                        </scroller>
                    </div>
                </div>

            </popup>
        </div>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem, Popup, Scroller, TransferDom} from 'vux'
export default {
  name: "CaseList",
  directives:{
      TransferDom
  },
  components:{
      Flexbox,FlexboxItem,Popup,
      Scroller
  },
  props:['lists'],
  data: () => ({
      showDialog:false,
      urls:'',
      title:'',
      player:null,
      showVideo:{name:''}
  }),
  methods:{
      shows(idx){
          let lists = this.lists[idx];
          if( lists.video == '' ){
              //跳去三级页面
              this.$router.push({ path: '/twos/videodetail', query: { cid: lists.id }})
          }else{
             this.showDialog = true;
             this.showVideo = lists;
             setTimeout(()=>{
                 this.player = new YKU.Player('youkuplayer',{
       				styleid: '0',
       				client_id: '7d5a081b71358f08',
       				vid: lists.video,
       				autoplay:true,
       				newPlayer: true
       			});
             }, 500);
          }
      },
      closePop(){
          this.showDialog = false;
          this.showVideo = {name:''};
          this.player = null;
      }
  }
}
</script>
<style lang="less">
    .casePopup.vux-popup-dialog{
        background: #fff;
    }
    .popTitle{
        font-size: 15px;
        color: #666;
        height: 40px;
        line-height: 40px;
        padding:0 10px;
    }
    .videos{
        background: #000;
        position:relative;
        left:0;
        top:0;
        width:100%;
        height:200px;
    }
    #youkuplayer{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:200px;
    }
    .clodeBtn{
        float: right;
    }
    .popFooter-title{
        padding:0 15px;
        height: 40px;
        font-size: 16px;
        color: #333;
        font-weight: 400;
        line-height: 40px;
    }
    .popFooter-content{
        font-size: 14px;
        color: #666;
        padding:0 15px;
        padding-bottom: 15px;
    }
</style>
